<template>
  <div class="amap-container">
    <!-- 地图容器 -->
    <div id="amap-view" class="amap-view" ref="mapContainer"></div>
    
    <!-- 地图控制面板 -->
    <div class="map-controls">
      <div class="view-controls">
        <button 
          class="control-btn" 
          :class="{ active: mapType === 'satellite' }" 
          @click="switchMapType('satellite')"
          title="卫星图"
        >
          <svg viewBox="0 0 24 24">
            <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17Z" fill="currentColor"/>
          </svg>
          <span>卫星图</span>
        </button>
        <button 
          class="control-btn" 
          :class="{ active: mapType === 'roadmap' }" 
          @click="switchMapType('roadmap')"
          title="标准地图"
        >
          <svg viewBox="0 0 24 24">
            <path d="M20.5,3L20.34,3.03L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21L3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19.03 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3Z" fill="currentColor"/>
          </svg>
          <span>标准</span>
        </button>
        <button 
          class="control-btn" 
          @click="resetView"
          title="重置视角"
        >
          <svg viewBox="0 0 24 24">
            <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M18,11H13L14.5,9.5L12.5,7.5L11,9H6V11H11L9.5,12.5L11.5,14.5L13,13H18V11Z" fill="currentColor"/>
          </svg>
          <span>重置</span>
        </button>
      </div>
      
      <!-- POI类型筛选 -->
      <div class="poi-filter">
        <h4>POI类型筛选</h4>
        <div class="filter-buttons">
          <button 
            class="filter-btn" 
            :class="{ active: activeFilter === 'all' }"
            @click="filterPois('all')"
          >
            全部({{ getTotalPois() }})
          </button>
          <button 
            class="filter-btn" 
            :class="{ active: activeFilter === 'scenic' }"
            @click="filterPois('scenic')"
          >
            景点({{ getPoiCount('scenic') }})
          </button>
          <button 
            class="filter-btn" 
            :class="{ active: activeFilter === 'monitor' }"
            @click="filterPois('monitor')"
          >
            监控({{ getPoiCount('monitor') }})
          </button>
          <button 
            class="filter-btn" 
            :class="{ active: activeFilter === 'service' }"
            @click="filterPois('service')"
          >
            服务({{ getPoiCount('service') }})
          </button>
          <button 
            class="filter-btn" 
            :class="{ active: activeFilter === 'dining' }"
            @click="filterPois('dining')"
          >
            餐饮({{ getPoiCount('dining') }})
          </button>
        </div>
      </div>
    </div>

    <!-- 实时统计信息 -->
    <div class="stats-panel">
      <div class="stat-item">
        <span class="stat-value">{{ stats.totalVisitors }}</span>
        <span class="stat-label">实时在园</span>
      </div>
      <div class="stat-item">
        <span class="stat-value">{{ visiblePois.length }}</span>
        <span class="stat-label">显示POI</span>
      </div>
      <div class="stat-item">
        <span class="stat-value">{{ stats.alertCount }}</span>
        <span class="stat-label">预警信息</span>
      </div>
    </div>

    <!-- POI详情信息窗 -->
    <div v-if="selectedPoi" class="poi-detail-panel" :style="detailPanelStyle">
      <div class="detail-header">
        <h3>{{ selectedPoi.name }}</h3>
        <button class="close-btn" @click="closePoiDetail">×</button>
      </div>
      <div class="detail-content">
        <div class="poi-info">
          <div class="info-row">
            <span class="label">类型:</span>
            <span class="value">{{ getPoiTypeLabel(selectedPoi.type) }}</span>
          </div>
          <div class="info-row">
            <span class="label">状态:</span>
            <span class="value" :class="selectedPoi.status">{{ selectedPoi.status === 'active' ? '正常' : '异常' }}</span>
          </div>
          <div v-if="selectedPoi.type === 'scenic'" class="scenic-details">
            <div class="info-row">
              <span class="label">当前游客:</span>
              <span class="value">{{ selectedPoi.data.currentVisitors }}/{{ selectedPoi.data.capacity }}</span>
            </div>
            <div class="info-row">
              <span class="label">温度:</span>
              <span class="value">{{ selectedPoi.data.temperature }}°C</span>
            </div>
          </div>
          <div v-else-if="selectedPoi.type === 'monitor'" class="monitor-details">
            <div class="info-row">
              <span class="label">设备类型:</span>
              <span class="value">{{ selectedPoi.data.deviceType }}</span>
            </div>
            <div class="info-row">
              <span class="label">分辨率:</span>
              <span class="value">{{ selectedPoi.data.resolution }}</span>
            </div>
            <button v-if="selectedPoi.data.videoUrl" class="video-btn" @click="openVideo">
              📹 查看监控视频
            </button>
          </div>
          <div v-else-if="selectedPoi.type === 'entrance'" class="entrance-details">
            <div class="info-row">
              <span class="label">日通行量:</span>
              <span class="value">{{ selectedPoi.data.dailyTraffic }}</span>
            </div>
            <div class="info-row">
              <span class="label">当前流量:</span>
              <span class="value">{{ selectedPoi.data.currentFlow }}</span>
            </div>
          </div>
        </div>
        <div class="poi-description">
          <p>{{ selectedPoi.data.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
import { amapPoiData } from './amapPoiData.js'

// Props
const props = defineProps({
  activeType: {
    type: String,
    default: 'all'
  }
})

// Emits
const emit = defineEmits(['poi-selected', 'stats-updated'])

// 响应式数据
const mapContainer = ref(null)
const map = ref(null)
const mapType = ref('satellite') // 默认显示卫星图
const activeFilter = ref('all') // 默认显示全部POI
const selectedPoi = ref(null)
const detailPanelStyle = ref({})

// 地图相关对象
let markers = []
let infoWindow = null

// 统计数据
const stats = ref({
  totalVisitors: 2568,
  alertCount: amapPoiData.filter(poi => poi.isAlert).length
})

// 计算可见POI
const visiblePois = computed(() => {
  if (activeFilter.value === 'all') {
    return amapPoiData
  }
  return amapPoiData.filter(poi => poi.type === activeFilter.value)
})

// 获取POI类型标签
const getPoiTypeLabel = (type) => {
  const typeMap = {
    scenic: '景区景点',
    monitor: '监控设备', 
    entrance: '出入口',
    accommodation: '住宿服务',
    dining: '餐饮美食',
    service: '公共服务',
    shopping: '购物商业'
  }
  return typeMap[type] || type
}

// 获取POI数量
const getPoiCount = (type) => {
  return amapPoiData.filter(poi => poi.type === type).length
}

const getTotalPois = () => {
  return amapPoiData.length
}

// 初始化高德地图
const initAmapMap = () => {
  if (!window.AMap) {
    console.error('高德地图API未加载')
    return
  }

  // 创建地图实例
  map.value = new AMap.Map('amap-view', {
    center: [105.5921, 30.5333], // 观音湖中心坐标
    zoom: 15,
    mapStyle: 'amap://styles/dark', // 使用深色样式作为基础
    features: ['bg', 'road', 'building', 'point'],
    viewMode: '2D'
  })

  // 设置自定义墨绿色地图样式
  map.value.setMapStyle({
    style: [
      {
        "featureType": "water",
        "elementType": "all",
        "stylers": {
          "color": "#1b4332"
        }
      },
      {
        "featureType": "land",
        "elementType": "all", 
        "stylers": {
          "color": "#2d6a4f"
        }
      },
      {
        "featureType": "boundary",
        "elementType": "geometry",
        "stylers": {
          "color": "#40916c"
        }
      },
      {
        "featureType": "railway",
        "elementType": "all",
        "stylers": {
          "visibility": "off"
        }
      },
      {
        "featureType": "highway",
        "elementType": "geometry",
        "stylers": {
          "color": "#52b788"
        }
      },
      {
        "featureType": "highway",
        "elementType": "geometry.fill",
        "stylers": {
          "color": "#52b788"
        }
      },
      {
        "featureType": "highway",
        "elementType": "geometry.stroke",
        "stylers": {
          "color": "#40916c"
        }
      },
      {
        "featureType": "arterial",
        "elementType": "geometry",
        "stylers": {
          "color": "#74c69d"
        }
      },
      {
        "featureType": "arterial",
        "elementType": "geometry.fill",
        "stylers": {
          "color": "#74c69d"
        }
      },
      {
        "featureType": "poi",
        "elementType": "all",
        "stylers": {
          "visibility": "off"
        }
      },
      {
        "featureType": "green",
        "elementType": "all",
        "stylers": {
          "color": "#95d5b2"
        }
      },
      {
        "featureType": "subway",
        "elementType": "all",
        "stylers": {
          "visibility": "off"
        }
      },
      {
        "featureType": "manmade",
        "elementType": "all",
        "stylers": {
          "visibility": "off"
        }
      },
      {
        "featureType": "local",
        "elementType": "all",
        "stylers": {
          "color": "#74c69d"
        }
      },
      {
        "featureType": "arterial",
        "elementType": "labels.text.fill",
        "stylers": {
          "color": "#ffffff"
        }
      },
      {
        "featureType": "highway",
        "elementType": "labels.text.fill",
        "stylers": {
          "color": "#ffffff"
        }
      },
      {
        "featureType": "poi",
        "elementType": "labels.text.fill",
        "stylers": {
          "color": "#ffffff"
        }
      },
      {
        "featureType": "building",
        "elementType": "all",
        "stylers": {
          "color": "#52b788"
        }
      }
    ]
  })

  // 创建信息窗体
  infoWindow = new AMap.InfoWindow({
    isCustom: false,
    content: '',
    offset: new AMap.Pixel(0, -30)
  })

  // 添加观音湖区域标识
  addLakeArea()
  
  // 加载POI标记
  loadPoiMarkers()

  // 添加地图事件监听
  map.value.on('click', () => {
    closePoiDetail()
  })
}

// 添加观音湖区域
const addLakeArea = () => {
  // 观音湖大致边界坐标（真实GPS坐标）
  const lakePolygon = new AMap.Polygon({
    path: [
      [105.5598, 30.5245], // 西南角
      [105.5789, 30.5301], // 西部
      [105.5921, 30.5333], // 中心
      [105.6012, 30.5298], // 东部
      [105.6089, 30.5387], // 东南角
      [105.5967, 30.5398], // 北部
      [105.5856, 30.5389], // 西北部
      [105.5678, 30.5267], // 西南部
      [105.5598, 30.5245]  // 回到起点
    ],
    strokeColor: '#40916c',
    strokeWeight: 2,
    strokeStyle: 'dashed',
    fillColor: '#1b4332',
    fillOpacity: 0.3
  })
  
  map.value.add(lakePolygon)
}

// 加载POI标记
const loadPoiMarkers = () => {
  clearMarkers()
  
  visiblePois.value.forEach(poi => {
    createPoiMarker(poi)
  })
}

// 创建POI标记
const createPoiMarker = (poi) => {
  // 根据POI类型设置图标
  const iconConfig = getPoiIcon(poi.type, poi.isAlert)
  
  const marker = new AMap.Marker({
    position: [poi.coordinates.lng, poi.coordinates.lat],
    icon: iconConfig.icon,
    offset: new AMap.Pixel(-12, -24),
    title: poi.name,
    extData: poi
  })

  // 添加点击事件
  marker.on('click', (e) => {
    const poiData = e.target.getExtData()
    showPoiDetail(poiData, e)
  })

  // 添加悬停效果
  marker.on('mouseover', (e) => {
    const poiData = e.target.getExtData()
    showPoiTooltip(poiData, e)
  })

  marker.on('mouseout', () => {
    infoWindow.close()
  })

  map.value.add(marker)
  markers.push(marker)
}

// 获取POI图标配置
const getPoiIcon = (type, isAlert) => {
  const iconSize = isAlert ? [28, 28] : [24, 24]
  const iconColor = isAlert ? '#ff4444' : getTypeColor(type)
  
  // 创建自定义图标
  const iconUrl = createIconSvg(type, iconColor, isAlert)
  
  return {
    icon: new AMap.Icon({
      image: iconUrl,
      size: new AMap.Size(iconSize[0], iconSize[1]),
      imageSize: new AMap.Size(iconSize[0], iconSize[1])
    })
  }
}

// 创建SVG图标
const createIconSvg = (type, color, isAlert) => {
  const svgPaths = {
    scenic: 'M12,2L13.09,8.26L17,7L14.94,9.06L19,12L14.94,14.94L17,17L13.09,15.74L12,22L10.91,15.74L7,17L9.06,14.94L5,12L9.06,9.06L7,7L10.91,8.26L12,2Z',
    monitor: 'M4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H16V20A1,1 0 0,1 15,21H9A1,1 0 0,1 8,20V18H4A2,2 0 0,1 2,16V4A2,2 0 0,1 4,2Z',
    entrance: 'M11,13H5V11H11L7.5,7.5L8.92,6.08L15.84,13L8.92,19.92L7.5,18.5L11,15H5V13H11Z',
    accommodation: 'M12,3L20,9V21H15V14H9V21H4V9L12,3Z',
    dining: 'M18.06,22.99H1.94C1.94,22.99 1.94,22.99 1.94,22.99Z M18.06,22.99H1.94L2,22L22,22V22.99Z',
    service: 'M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z',
    shopping: 'M17,18C17.56,18 18,18.44 18,19C18,19.56 17.56,20 17,20C16.44,20 16,19.56 16,19C16,18.44 16.44,18 17,18Z'
  }
  
  const path = svgPaths[type] || svgPaths.scenic
  const pulseEffect = isAlert ? `<animate attributeName="r" values="8;12;8" dur="2s" repeatCount="indefinite"/>` : ''
  
  const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <defs>
        <filter id="shadow">
          <feDropShadow dx="1" dy="1" stdDeviation="1" flood-opacity="0.3"/>
        </filter>
      </defs>
      ${isAlert ? `<circle cx="12" cy="12" r="8" fill="${color}" opacity="0.3">${pulseEffect}</circle>` : ''}
      <circle cx="12" cy="12" r="10" fill="white" filter="url(#shadow)"/>
      <path d="${path}" fill="${color}"/>
    </svg>
  `
  
  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg)
}

// 获取类型颜色
const getTypeColor = (type) => {
  const colors = {
    scenic: '#52b788',      // 景点 - 主墨绿色
    monitor: '#74c69d',     // 监控 - 浅墨绿色 
    entrance: '#40916c',    // 出入口 - 深墨绿色
    accommodation: '#95d5b2', // 住宿 - 最浅墨绿色
    dining: '#2d6a4f',      // 餐饮 - 中等墨绿色
    service: '#6a994e',     // 服务 - 橄榄绿
    shopping: '#a7c957'     // 购物 - 草绿色
  }
  return colors[type] || '#52b788'
}

// 显示POI详情
const showPoiDetail = (poi, event) => {
  selectedPoi.value = poi
  
  // 计算面板位置
  const pixel = map.value.lngLatToContainer(new AMap.LngLat(poi.coordinates.lng, poi.coordinates.lat))
  detailPanelStyle.value = {
    position: 'absolute',
    left: `${pixel.x + 20}px`,
    top: `${pixel.y - 10}px`,
    zIndex: 1000
  }
  
  emit('poi-selected', poi)
}

// 显示POI提示信息
const showPoiTooltip = (poi, event) => {
  const content = `
    <div style="padding: 8px; min-width: 150px;">
      <h4 style="margin: 0 0 5px 0; color: #333;">${poi.name}</h4>
      <p style="margin: 0; color: #666; font-size: 12px;">${getPoiTypeLabel(poi.type)}</p>
      ${poi.isAlert ? '<p style="margin: 5px 0 0 0; color: #ff4444; font-size: 12px;">⚠️ 有预警信息</p>' : ''}
    </div>
  `
  
  infoWindow.setContent(content)
  infoWindow.open(map.value, [poi.coordinates.lng, poi.coordinates.lat])
}

// 关闭POI详情
const closePoiDetail = () => {
  selectedPoi.value = null
  infoWindow.close()
}

// 切换地图类型
const switchMapType = (type) => {
  mapType.value = type
  if (map.value) {
    if (type === 'satellite') {
      // 卫星图基础上应用墨绿色滤镜
      map.value.setMapStyle('amap://styles/satellite')
      // 应用自定义墨绿色样式覆盖
      setTimeout(() => {
        map.value.setMapStyle({
          style: [
            {
              "featureType": "water",
              "elementType": "all",
              "stylers": {
                "color": "#1b4332",
                "saturation": -50,
                "lightness": -20
              }
            },
            {
              "featureType": "land", 
              "elementType": "all",
              "stylers": {
                "hue": "#2d6a4f",
                "saturation": -30,
                "lightness": -10
              }
            },
            {
              "featureType": "green",
              "elementType": "all", 
              "stylers": {
                "color": "#52b788",
                "saturation": 20
              }
            }
          ]
        })
      }, 100)
    } else {
      // 标准地图应用完整墨绿色样式
      map.value.setMapStyle({
        style: [
          {
            "featureType": "water",
            "elementType": "all",
            "stylers": {
              "color": "#1b4332"
            }
          },
          {
            "featureType": "land",
            "elementType": "all", 
            "stylers": {
              "color": "#2d6a4f"
            }
          },
          {
            "featureType": "highway",
            "elementType": "geometry",
            "stylers": {
              "color": "#52b788"
            }
          },
          {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
              "color": "#74c69d"
            }
          },
          {
            "featureType": "green",
            "elementType": "all",
            "stylers": {
              "color": "#95d5b2"
            }
          },
          {
            "featureType": "building",
            "elementType": "all",
            "stylers": {
              "color": "#52b788"
            }
          }
        ]
      })
    }
  }
}

// 重置视角
const resetView = () => {
  if (map.value) {
    map.value.setZoomAndCenter(15, [105.5921, 30.5333])
  }
}

// 过滤POI
const filterPois = (type) => {
  activeFilter.value = type
  loadPoiMarkers()
  
  // 更新统计
  stats.value.alertCount = visiblePois.value.filter(poi => poi.isAlert).length
  emit('stats-updated', stats.value)
}

// 清除所有标记
const clearMarkers = () => {
  if (markers.length > 0) {
    map.value.remove(markers)
    markers = []
  }
}

// 打开视频
const openVideo = () => {
  if (selectedPoi.value?.data?.videoUrl) {
    // 这里可以集成视频播放器
    alert(`打开监控视频: ${selectedPoi.value.data.videoUrl}`)
  }
}

// 监听外部属性变化
watch(() => props.activeType, (newType) => {
  if (newType !== activeFilter.value) {
    filterPois(newType)
  }
})

// 生命周期
onMounted(() => {
  // 等待高德地图API加载完成
  if (window.AMap) {
    initAmapMap()
  } else {
    const checkAMap = setInterval(() => {
      if (window.AMap) {
        clearInterval(checkAMap)
        initAmapMap()
      }
    }, 100)
  }
  
  // 模拟实时数据更新
  setInterval(() => {
    stats.value.totalVisitors += Math.floor(Math.random() * 10 - 5)
    if (stats.value.totalVisitors < 2400) stats.value.totalVisitors = 2400
    if (stats.value.totalVisitors > 2800) stats.value.totalVisitors = 2800
  }, 8000)
})

onUnmounted(() => {
  if (map.value) {
    map.value.destroy()
  }
})
</script>

<style scoped>
.amap-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.amap-view {
  width: 100%;
  height: 100%;
}

/* 地图控制面板 */
.map-controls {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.view-controls {
  display: flex;
  gap: 10px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 12px;
  padding: 10px;
  backdrop-filter: blur(10px);
}

.control-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 8px;
  color: #00ff88;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 60px;
}

.control-btn:hover,
.control-btn.active {
  background: rgba(0, 255, 136, 0.2);
  border-color: #00ff88;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.control-btn svg {
  width: 18px;
  height: 18px;
}

.control-btn span {
  font-size: 0.75rem;
  font-weight: 500;
}

/* POI筛选面板 */
.poi-filter {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 12px;
  padding: 15px;
  backdrop-filter: blur(10px);
  min-width: 200px;
}

.poi-filter h4 {
  color: #00ff88;
  margin: 0 0 10px 0;
  font-size: 0.9rem;
  text-align: center;
}

.filter-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-btn {
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.8rem;
  text-align: left;
}

.filter-btn:hover,
.filter-btn.active {
  background: rgba(0, 255, 136, 0.2);
  border-color: #00ff88;
  color: #00ff88;
}

/* 统计面板 */
.stats-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 15px;
  z-index: 100;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 10px;
  padding: 12px 16px;
  backdrop-filter: blur(10px);
  min-width: 80px;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: bold;
  color: #00ff88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

/* POI详情面板 */
.poi-detail-panel {
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 12px;
  padding: 0;
  backdrop-filter: blur(15px);
  min-width: 300px;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 255, 136, 0.1);
}

.detail-header h3 {
  margin: 0;
  color: #00ff88;
  font-size: 1.1rem;
}

.close-btn {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.detail-content {
  padding: 20px;
}

.poi-info .info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  align-items: center;
}

.poi-info .label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.poi-info .value {
  color: white;
  font-weight: 500;
  font-size: 0.9rem;
}

.poi-info .value.active {
  color: #66bb6a;
}

.poi-info .value.inactive {
  color: #ff6b6b;
}

.video-btn {
  margin-top: 10px;
  padding: 8px 16px;
  background: rgba(0, 255, 136, 0.2);
  border: 1px solid #00ff88;
  border-radius: 6px;
  color: #00ff88;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.8rem;
}

.video-btn:hover {
  background: rgba(0, 255, 136, 0.3);
}

.poi-description {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.poi-description p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* 响应式设计 */
@media screen and (max-width: 1400px) {
  .map-controls {
    top: 15px;
    left: 15px;
  }
  
  .poi-filter {
    min-width: 180px;
    padding: 12px;
  }
  
  .stats-panel {
    top: 15px;
    right: 15px;
    gap: 10px;
  }
  
  .stat-item {
    padding: 10px 12px;
    min-width: 70px;
  }
  
  .stat-value {
    font-size: 1.2rem;
  }
  
  .poi-detail-panel {
    min-width: 280px;
    max-width: 350px;
  }
}
</style> 